import { FormItem } from 'element-ui';
import { noop } from 'element-ui/src/utils/util';
import AsyncValidator from './validator/index';

export default {
  name: 'ElFormItem',
  mixins: [FormItem],
  methods: {
    // 核心校验函数 trigger值为change、blur 默认change
    validate(trigger, callback = noop) {
      // 开放校验
      this.validateDisabled = false;
      // 过滤对应trigger的规则
      const rules = this.getFilteredRule(trigger);
      // 若无规则或无必填 回调并返回
      if ((!rules || rules.length === 0) && this.required === undefined) {
        callback();
        return true;
      }
      // 设置当前校验状态：校验中
      this.validateState = 'validating';
      // 以下代码可参考async-validator使用文档
      const descriptor = {};
      // 因为async-validator的rules没有trigger属性 删除每条规则的trigger
      if (rules && rules.length > 0) {
        rules.forEach(rule => {
          delete rule.trigger;
        });
      }
      // 以FormItem当前prop属性为键赋值对应rules
      descriptor[this.prop] = rules;
      // 以descriptor为构造参数 初始化一个校验器
      const validator = new AsyncValidator(descriptor);
      const model = {};
      // 获取当前FormItem的对应字段值
      model[this.prop] = this.fieldValue;
      // 触发表单校验 firstFields: true 指当某一规则校验失败时，终止校验；
      validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
        this.validateState = !errors ? 'success' : 'error';
        this.validateMessage = errors ? errors[0].message : '';
        // 回调校验信息、不符合的字段
        callback(this.validateMessage, invalidFields);
        // 对应 Form Events 如果elForm存在，则每次触发validate事件
        // 参数：被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）
        this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
      });
    }
  }
};
